<!-- 随机名字<template>
  <div>
    <div>{{ displayedUsername }}</div>
    <button @click="generateRandomName">随机</button>
  </div>
</template>

<script setup>
import { ref, onBeforeUpdate } from 'vue';

const username = ref('');
const displayedUsername = ref('');
const displayIndex = ref(0);
let intervalId = null;

const generateRandomName = () => {
  const names = ['飞翔的企鹅', '奔跑的卡皮巴拉', '跳跃的兔子', '旋转的风车', '歌唱的小鸟', '舞动的蝴蝶', '闪耀的星星', '怒吼的狮子', '沉睡的巨龙', '漫步的乌龟', '飞翔的风筝', '潜行的猫咪', '闪耀的钻石', '微笑的太阳', '哭泣的云朵', '调皮的精灵', '快乐的音符', '神秘的幽灵', '勇敢的骑士', '聪明的狐狸', '憨厚的棕熊', '可爱的熊猫', '疯狂的猴子', '优雅的天鹅'];
  const randomIndex = Math.floor(Math.random() * names.length);
  username.value = names[randomIndex];
  displayIndex.value = 0;
  displayedUsername.value = '';
  if (intervalId) {
    clearInterval(intervalId);
  }
  intervalId = setInterval(() => {
    if (displayIndex.value < username.value.length) {
      displayedUsername.value += username.value.charAt(displayIndex.value);
      displayIndex.value++;
    } else {
      clearInterval(intervalId);
    }
  }, 300);
};

onBeforeUpdate(() => {
  if (displayIndex.value >= username.value.length) {
    clearInterval(intervalId);
  }
});
</script> -->
<template>
	<view class="container">
		<image :src="avatarUrl" class="avatar" mode="aspectFill"></image>
		<text class="username">{{ username }}</text>
		<button @click="generateRandomUser" class="random-button">随机</button>
	</view>
	
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import multiavatar from '@multiavatar/multiavatar';

	// 定义响应式变量
	const avatarUrl = ref('');
	const username = ref('');

	// 生成随机用户名的函数
	const generateRandomUsername = () => {
		const adjectives = ['Happy', 'Sad', 'Angry', 'Clever', 'Brave', 'Lazy'];
		const nouns = ['Dog', 'Cat', 'Bird', 'Fish', 'Tiger', 'Lion'];
		const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
		const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
		return `${randomAdjective}${randomNoun}`;
	};

	// 生成随机用户的函数
	const generateRandomUser = async () => {
		const randomUsername = generateRandomUsername();
		// 使用 @multiavatar/multiavatar 库生成头像
		const avatarSvg = multiavatar(randomUsername);
		// 将生成的 SVG 数据转换为 base64 编码，以便在 image 元素中显示
		avatarUrl.value = `data:image/svg+xml;base64,${btoa(avatarSvg)}`;
		username.value = randomUsername;
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.avatar {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		margin-bottom: 20px;
	}

	.username {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.random-button {
		padding: 10px 20px;
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 10px;
		font-size: 18px;
	}
</style>

<!-- 思路：欢迎回来改成文字？新老用户显示不同的背景？ -->
<!-- 点击进入统一会发送用户名和头像到后端，发送前监测一下如果为空则随机生成变展示生成效果，然后再发送到后端并更新登录状态。 -->